import { FC, useRef } from 'react'

import { Switch, Space, Slider, Button } from '@douyinfe/semi-ui'

type ControlBarProp = {
  onTogglePlay: (stat: boolean) => void
  onChangeVoice: (value: number) => void
  onChangeGrid: (value: number) => void
}

const ControlBar: FC<ControlBarProp> = props => {
  const bar = useRef<HTMLElement>(null)
  const onTogglePlay = (v: boolean) => {
    props.onTogglePlay(v)
    v && handleClose()
  }
  const onChangeVoice = (value: number | number[] | undefined) => {
    value && props.onChangeVoice(Array.isArray(value) ? value[0] : value)
  }

  const onChangeGrid = (value: number | number[] | undefined) => {
    value && props.onChangeGrid(Array.isArray(value) ? value[0] : value)
  }

  const handleClose = () => {
    if (bar.current) {
      window.scrollTo({
        top: bar.current.clientHeight
      })
    }
  }

  return (
    <section className="control-bar" ref={bar}>
      <Space>
        <span>全局播放</span>
        <Switch onChange={onTogglePlay} checkedText="开" uncheckedText="关" />

        <span>全局音量</span>
        <Slider defaultValue={1} style={{ width: '200px' }} min={0} max={1} step={0.1} showBoundary={false} onChange={onChangeVoice}></Slider>

        <span>布局</span>
        <Slider defaultValue={0} step={33} style={{ width: '200px' }} marks={{ 0: '自动', 33: '1/1', 66: '1/2', 99: '1/3' }} max={99} onChange={onChangeGrid}></Slider>

        <Button onClick={handleClose}>收起</Button>
      </Space>
    </section>
  )
}

export default ControlBar
